<template>
  <div>
    <ul>
      <div class="city">杭州<i class="iconfont icon-xiala"></i></div>
      <li
        v-for="(item, index) in navList"
        :key="item.id"
        @click="hover(index)"
        :class="{ 'font-s': item.show }"
      >
        {{ item.name }}
        <span v-show="item.show"></span>
      </li>
      <span class="iconfont icon-sousuo"></span>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // navList: ["热映", "影院", "待映", "经典电影"],
      navList: [
        { name: "热映", id: 1, show: true },
        { name: "影院", id: 2, show: false },
        { name: "待映", id: 3, show: false },
        { name: "经典影院", id: 4, show: false },
      ],
      font_s: "font-size:16px",
    };
  },
  methods: {
    hover(index) {
      console.log(index);

      for (let i = 0; i < this.navList.length; i++) {
        this.navList[i].show = false;
        if (i == index) {
          this.navList[i].show = true;
        }
      }
    },
  },
};
</script>

<style lang="less" scoped>
@import "../../assets/css/var.less";
ul {
  width: 100%;
  height: 44px;
  display: flex;
  justify-content: space-around;
  color: #666;
  border-bottom: 1px solid #ccc;

  div {
    font-size: @s-font;
    .center();
  }
  .city {
    .iconfont {
      color: #666;
    }
  }
  .iconfont {
    font-size: @m-font;
    .center();
    color: @bg-color;
  }
  .font-s {
    font-size: 18px !important;
  }
  li {
    .center();
    font-size: @xs-font;
    font-weight: 500;
    position: relative;
    span {
      display: block;
      position: absolute;
      height: 3px;
      width: 20px;
      bottom: 1px;
      border-radius: 1px;
      background: #f03d37;
    }
  }
}
</style>
